<template>
  <div>
    <template v-if="invalidSearch">
      共为您找到<span class="result-num">{{total}}</span>条内容
    </template>
    <template v-else-if="searchCate">
      <template v-if="cateName">
        <template v-if="searchKeywords">
          为您找到
          <span class="result-num">{{total}}</span>
          条关于
          <span class="keywords">{{keywords}}</span>
          且归属于
          <span class="keywords">{{cateName}}</span>
          下的内容
        </template>
        <template v-else>
          共为您找到
          <span class="result-num">{{total}}</span>
          条归属于
          <span class="keywords">{{cateName}}</span>
          下的内容
        </template>
      </template>
      <template v-else>
        <template v-if="searchKeywords">
          共为您找到
          <span class="result-num">{{total}}</span>
          条关于
          <span class="keywords">{{keywords}}</span>
          的内容
        </template>
        <template v-else>
          没有找到该分类呢 为您搜索到了以下内容
        </template>
      </template>
    </template>
    <template v-else>
      共为您找到
      <span class="result-num">{{total}}</span>
      条关于
      <span class="keywords">{{keywords}}</span>
      的内容
    </template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props: {
    total: {
      type: Number,
      default: 0
    },
    keywords: {
      type: String,
      default: undefined
    },
    cate: {
      type: Number,
      default: undefined
    }
  },
  computed: {
    ...mapGetters('home', ['cates']),
    invalidSearch () {
      return this.keywords === undefined && this.cate === undefined
    },
    searchKeywords () {
      return this.keywords !== undefined
    },
    searchCate () {
      return this.cate !== undefined
    },
    cateName () {
      const hitCate = this.cates.filter(({ id }) => id === parseInt(this.cate));
      if (hitCate.length) {
        return hitCate[0].name
      }
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.result-num {
  color: #409eff;
  padding: 0 5px;
}
.keywords {
  color: red;
  padding: 2px 5px;
  border-radius: 3px;
}
</style>